<!--
内容：公共头部
作者：mcl
日期： 20171110
-->
<template>
  <div class="top clearfix" id="js-topBox">
    <div class="col-xs-12 col-sm-12 col-md-2 logo">魔汉管理平台</div>
    <div class="col-xs-12 col-sm-12 col-md-8 text-left">
      <icon name="bars" class="icon-font-awe" scale="1.2" id="js-toggleAside"></icon>
    </div>
  </div>
</template>

<script>
export default {
  name: 'top',
  data () {
    return {
      testMsg: 'cccc'
    }
  },
  mounted: function () {
    let that = this
    this.$nextTick(() => {
      window.$(function () {
        window.$('#js-toggleAside').click(function () {
          let $app = window.$('#app')
          that.MyDebugger.log('js-toggleAside+++++++++++')
          if ($app.hasClass('hide-left-aside')) {
            $app.removeClass('hide-left-aside')
          } else {
            $app.addClass('hide-left-aside')
          }
        })
      })
    })
  },
  methods: {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped="scoped" type="text/css">
  .top {
    width: 100%;
    z-index: 5;
    line-height: 60px;
    height: 60px;
    color: #fff;
    font-size: 20px;
    font-weight: 300;
    background: #409EFF;
  .logo{
    text-align: center;    
    background: #409EFF;
  }
  .text-left{
    text-align: left;    
    background: #409EFF;
  }
  .top-oprate {
    padding: 10px;
    font-size: 20px;
    font-weight: 300;
    cursor: pointer;
  }

  }
</style>
